const canvas = document.querySelector("#canvas");

// Set canvas size to fit the real size
const rect = canvas.getBoundingClientRect();
canvas.width = rect.width;
canvas.height = rect.height;

const raindropFx = new RaindropFX({
    canvas: canvas,
    background: "https://w.wallhaven.cc/full/e7/wallhaven-e771wo.jpg",
    // mist: false,
    // mistColor: [0.01, 0.01, 0.01, 0.01],
});
raindropFx.start();

// Resize the effect renderer
window.onresize = () => {
    const rect = canvas.getBoundingClientRect();
    raindropFx.resize(rect.width, rect.height);
}